import React from 'react'
import { connect } from 'dva'
import BasicLayout from './BasicLayout'
import { LocaleProvider } from 'antd'
import zh_CN from 'antd/lib/locale-provider/zh_CN'
// import PageLoading from '@/components/PageLoading'
// import NProgress from 'nprogress'
// import 'nprogress/nprogress.css'
import Authorized from '@/components/Authorized'
import Redirect from 'umi/redirect'

@connect(({ app: { menu=[], user={} }, loading }) => ({ menu, user, loading }))
class AuthBasicLayout extends React.Component {
  state = {
    loading: true
  }
  async componentDidMount() {
    const {
      dispatch,
      route: {
        routes
      }
    } = this.props

    await dispatch({
      type: 'app/fetchCurrent'
    })
    
    dispatch({
      type: 'app/menu',
      payload: {
        routes
      }
    })
    this.setState({
      loading: false
    })
  }
  // fixed can't perform a React state update on an unmounted component.
  componentWillUnmount() {
    this.setState = (state, callback) => {
      return;
    }
  }
  render() {
    if (this.state.loading) {
      // NProgress.start()
      return null
      // return (
      //   <PageLoading />
      // )
    }
    // NProgress.done()
    const { children, ...props } = this.props
    const {
      route,
      user: {
        authorities = []
      }
    } = props
    return (
      <LocaleProvider locale={zh_CN}>
        <Authorized authorities={authorities} authority={route.authority} noMatch={<Redirect to="/login" />}>
          <BasicLayout {...props}>{children}</BasicLayout>
        </Authorized>
      </LocaleProvider>
    )
  }
}

export default AuthBasicLayout